import React, { useState } from 'react';
import { Card, Row, Col, Icon, Tooltip, List, Divider, Button } from 'antd';
import _ from 'lodash';
import router from 'umi/router';

const grid = {
  gutter: 10,
  xs: 1,
  sm: 2,
  md: 2,
  lg: 2,
  xl: 3,
  xxl: 3,
};

const handlerWarningText = reduxItem => {
  const { orgIds } = reduxItem;
  if (orgIds.hrOrgTypeId === '11') return '区域';
  if (orgIds.hrOrgTypeId === '20') return '公司';
  if (orgIds.hrOrgTypeId === '21' || orgIds.hrOrgTypeId === '23') return '项目';
  return '';
};

const Content = props => {
  const { item, reduxItem, dispatch } = props;
  const [viewMore, setViewMore] = useState(false);
  // 点击预警区域下钻
  const handlerWarningOrgDrillDown = id => {
    const currentValue = _.filter(reduxItem.tree, x => x.orgdepid === id);
    const { orgnofullpath, hrOrgTypeId, orgdepid } = currentValue[0];
    dispatch({
      type: 'MonitoringConsole/getOrgIds',
      payload: {
        orgIds: {
          ...reduxItem.orgIds,
          orgdepid,
          hrOrgTypeId,
          orgnofullpath,
        },
        getTree: reduxItem.getTree,
      },
    });
  };

  const handlerWarningOrgDisplayMore = (list, className) => {
    if (list && list.length > 0) {
      return list.map(v => (
        <Button
          type="link"
          size="small"
          key={v.orgName}
          onClick={() => handlerWarningOrgDrillDown(v.orgId)}
        >
          <div className={className}>{v.orgName}</div>
        </Button>
      ));
    }
    return <>&nbsp;无</>;
  };

  const handlerClickDitails = page => {
    router.push(`/MonitoringConsole/${page}`);
    dispatch({
      type: 'MonitoringConsole/getOrgIds',
      payload: {
        orgIds: {
          ...reduxItem.orgIds,
          page,
          secondLevelTabKey: 1,
        },
        getTree: reduxItem.getTree,
      },
    });
  };

  return (
    <div style={{ position: 'relative' }} key={item.key}>
      <Card className="xh-gxc-card">
        <Row gutter={[10, 10]}>
          <Col>
            <Row type="flex" justify="space-between">
              {/* <Link to={`/MonitoringConsole/${item.key}`}> */}
              <Col
                span={6}
                className={item.className}
                onClick={() => handlerClickDitails(item.key)}
              >
                {item.text}
              </Col>
              {/* </Link> */}
              <Col
                span={18}
                style={{
                  height: '70px',
                  overflow: 'hidden',
                }}
              >
                {item.list && !_.isEmpty(item.list) ? (
                  item.list.map(v =>
                    v.isDisplay ? (
                      <Row type="flex" justify="space-between" gutter={[0, 15]} key={v.title}>
                        <Col>
                          {v.title}
                          &nbsp;
                          <Tooltip placement="top" title={v.detail}>
                            <Icon
                              style={{ color: '#D2D2D2', marginLeft: '3px' }}
                              type="question-circle"
                              theme="filled"
                            />
                          </Tooltip>
                        </Col>
                        <Col>{v.num}</Col>
                      </Row>
                    ) : (
                      <></>
                    ),
                  )
                ) : (
                  <></>
                )}
              </Col>
              <Col span={24}>
                <Row type="flex" justify="space-between" align="middle">
                  <Col span={6}></Col>
                  <Col span={18}>
                    <div className="view-more">
                      {_.filter(item.list, x => x.isDisplay).length > 3 ? (
                        <Button type="link" size="small" onClick={() => setViewMore(!viewMore)}>
                          {viewMore ? '收起更多' : '查看更多'}
                          <Icon type={viewMore ? 'up' : 'down'} />
                        </Button>
                      ) : null}
                    </div>
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
          {reduxItem.orgIds.hrOrgTypeId !== '31' ? (
            <>
              <Divider dashed />
              <Col>
                <Row gutter={[10, 5]}>
                  <Col className="text-ellipsis">
                    <Icon type="alert" theme="filled" style={{ color: 'rgba(255,92,92,1)' }} />
                    <span>&nbsp;预警条件:</span>
                    <span>
                      &nbsp;
                      {item.warningRegion ? (
                        <Tooltip placement="top" title={item.warningCondition}>
                          {item.warningCondition}
                        </Tooltip>
                      ) : (
                        <>无</>
                      )}
                    </span>
                  </Col>
                  <Col style={{ height: '29px' }} className="text-ellipsis">
                    <span style={{ marginLeft: '15px' }}>预警{handlerWarningText(reduxItem)}:</span>
                    <Tooltip
                      overlayClassName="xh-gxc-tooltip-box"
                      placement="topLeft"
                      title={handlerWarningOrgDisplayMore(item.warningRegion, 'xh-gxc-tooltip')}
                    >
                      {handlerWarningOrgDisplayMore(item.warningRegion)}
                    </Tooltip>
                  </Col>
                </Row>
              </Col>
            </>
          ) : null}
        </Row>
      </Card>
      {/* 查看更多 */}
      <div onMouseOver={() => setViewMore(true)} onMouseOut={() => setViewMore(false)}>
        <Card
          style={{
            display: viewMore ? 'block' : 'none',
            boxShadow: viewMore ? '0px 16px 36px 11px rgba(0,0,0,0.2)' : null,
            position: 'absolute',
            top: '0',
            left: '0',
            width: '100%',
            zIndex: '99999',
          }}
        >
          <Row gutter={[10, 10]}>
            <Col>
              <Row type="flex" justify="space-between">
                <Col
                  span={6}
                  className={item.className}
                  onClick={() => handlerClickDitails(item.key)}
                >
                  {item.text}
                </Col>
                <Col span={18}>
                  {item.list && !_.isEmpty(item.list) ? (
                    item.list.map(v =>
                      v.isDisplay ? (
                        <Row type="flex" justify="space-between" gutter={[0, 15]} key={v.title}>
                          <Col>
                            {v.title}
                            &nbsp;
                            <Tooltip placement="top" title={v.detail}>
                              <Icon
                                style={{ color: '#D2D2D2', marginLeft: '3px' }}
                                type="question-circle"
                                theme="filled"
                              />
                            </Tooltip>
                          </Col>
                          <Col>{v.num}</Col>
                        </Row>
                      ) : (
                        <></>
                      ),
                    )
                  ) : (
                    <></>
                  )}
                </Col>
                <Col span={24}>
                  <Row type="flex" justify="space-between" align="middle">
                    <Col span={6}></Col>
                    <Col span={18}>
                      <div className="view-more">
                        {_.filter(item.list, x => x.isDisplay).length > 3 ? (
                          <Button type="link" size="small" onClick={() => setViewMore(false)}>
                            {viewMore ? '收起更多' : '查看更多'}
                            <Icon type={viewMore ? 'up' : 'down'} />
                          </Button>
                        ) : null}
                      </div>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Col>
            {reduxItem.orgIds.hrOrgTypeId !== '31' ? (
              <>
                <Divider dashed />
                <Col>
                  <Row gutter={[10, 5]}>
                    <Col className="text-ellipsis">
                      <Icon type="alert" theme="filled" style={{ color: 'rgba(255,92,92,1)' }} />
                      <span>&nbsp;预警条件:</span>
                      <span>
                        &nbsp;
                        {item.warningRegion ? (
                          <Tooltip placement="top" title={item.warningCondition}>
                            {item.warningCondition}
                          </Tooltip>
                        ) : (
                          <>无</>
                        )}
                      </span>
                    </Col>
                    <Col style={{ height: '29px' }} className="text-ellipsis">
                      <span style={{ marginLeft: '15px' }}>
                        预警{handlerWarningText(reduxItem)}:
                      </span>
                      <Tooltip
                        overlayClassName="xh-gxc-tooltip-box"
                        placement="topLeft"
                        title={handlerWarningOrgDisplayMore(item.warningRegion, 'xh-gxc-tooltip')}
                      >
                        {handlerWarningOrgDisplayMore(item.warningRegion)}
                      </Tooltip>
                    </Col>
                  </Row>
                </Col>
              </>
            ) : null}
          </Row>
        </Card>
      </div>
    </div>
  );
};

const CoreMonitoring = props => {
  const { reduxItem } = props;
  return (
    <>
      {/* Begin 中部标题 */}
      <Row type="flex" align="bottom" gutter={[10]} className="index-middle">
        <Col className="font-size14">核心指标监控</Col>
        {reduxItem.orgIds.hrOrgTypeId !== '31' ? (
          <Col span={22}>
            <Tooltip
              placement="topLeft"
              title={
                reduxItem.problemAreaName && reduxItem.problemAreaName.length > 0
                  ? reduxItem.problemAreaName.map(val => <span key={val}>{val} &nbsp;</span>)
                  : '空'
              }
            >
              <div className="text-ellipsis font-size12">
                （三个及以上维度存在问题{handlerWarningText(reduxItem)}：
                {reduxItem.problemAreaName && reduxItem.problemAreaName.length > 0
                  ? reduxItem.problemAreaName.map(val => <span key={val}>{val} &nbsp;</span>)
                  : '空'}
                ）
              </div>
            </Tooltip>
          </Col>
        ) : null}
      </Row>
      {/* End 中部标题 */}
      <List
        grid={grid}
        className="index-bottom"
        dataSource={props.reduxItem.bottomData}
        loading={props.reduxItem.bottomData.length <= 0}
        renderItem={item => {
          if (item.isDisplay) {
            return (
              <List.Item>
                <Content item={item} {...props} />
              </List.Item>
            );
          }
          return <></>;
        }}
      />
    </>
  );
};

export default CoreMonitoring;
